<template>
	<view>
		<view class="header">
			<view class="num">总共1件宝贝</view>
		</view>
		<view class="content">
			<!-- <block v-for="(item, index) in productList" :key="index"> -->
				<view class="order">
					<checkbox-group @click="tapchecked" class="order-checkbox">
						<checkbox  :checked="state"></checkbox>
					</checkbox-group>
					<image src="" class="img"></image>
					<view class="product-info">
						<view class="proname">
							啛啛喳喳
						</view>

						<view class="price">￥11.00</view>
						
						<view class="numChangrBox">
							<text  style="background-color: #EEEEEE;">-</text>
							<text  style="color: black;">4</text>
							<text  style="background-color: #00C657;">+</text>
						</view>
					</view>
					<view style="margin-right: 30rpx;margin-left: auto;" @click="deleteOrder">
						<image src="@/static/delete.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
				</view>
			<!-- </block> -->
		</view>
		<view class="footer">
			<view class="choose">
				<checkbox-group @click="tapAllChecked">
					<checkbox :checked="allChecked">全选</checkbox>
				</checkbox-group>
			</view>
			<view class="total">
				<text>合计：￥0</text>
			</view>
			<view class="pay" >
				<text style="display: block; background-color: #00C657;color: #FFFFFF;text-align: center;width: 192rpx;height: 110rpx;">去结算</text>
			</view>
			
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return{
			
		}
	},
	methods:{
		tapchecked(){
			console.log("点击了多选框");
		},
		deleteOrder(){
			console.log("点击了删除");
		},
		tapAllChecked(){
			console.log("点击了全选框");
		}
	}
}
</script>
<style lang="scss">
page {
		background-color: rgb(245, 245, 245);
	}
.header {
	width: 100%;
	height: 240rpx;
	background-color: #00C657;
	position: relative;
}
.num {
	margin-left: 30rpx;
	padding-top: 50rpx;
	color: #FFFFFF;
	font-size: 26rpx;
}
.content {
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.02);
	border-radius: 50rpx;
	position: absolute;
	top: 100rpx;
	left: 30rpx;
	.order {
		display: flex;
		flex-direction: row;
		padding-left: 20rpx;
		margin: 40rpx 20rpx;
		position:relative;
		.order-checkbox{
			height: 120rpx;
			line-height: 120rpx;
			margin: 0 10rpx;
		}
		.img{
				width: 120rpx;
			height: 120rpx;
			background-color: #4CD964;
		}
		.product-info {
			margin: 0 20rpx;
			
		}
		.numChangrBox{
			position: absolute;
			right: 5%;
			bottom: 0;
			text{
				display: inline-block;
				width: 45rpx;
				height: 45rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 50%;
				line-height: 45rpx;
			}
		}
	  }
	}
.footer {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 110rpx;
	line-height: 110rpx;
	background-color: #FFFFFF;
	display: flex;
	
	.choose{
		flex: 2;
		display: block;
		margin: 0 20rpx;
	}
	.total{
		flex: 3;
	}
	.btn{
		flex: 1;
	}
}



checkbox .wx-checkbox-input {
    border-color:#D4D4D4;  
	border-radius: 50%;

}
	
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	color: #fff;
	background: #00C657;
}
.price{
	position: absolute;
	bottom: 0;
	}
</style>

